
<template>
    <div> 
      <el-carousel :interval="4000" type="card" height="327px">
                <el-carousel-item v-for="item in imgList" :key="item.id">
                     <img :src="item.idView" class="image">
                </el-carousel-item>

      </el-carousel>

    
    <div style="padding-left:10px; padding-right: 10px; width: calc(100vw - 200px)">
  <!--    功能趋于-->
      <div style="margin: 10px 0">
        
  
      </div>
  <!--    搜索区域-->
      <div style="margin: 10px 0">
        <!-- <span style="color: white">我的课程：</span> -->
        <!-- <el-input v-model="search" placeholder="请输入关键字" style="width: 20%" clearable></el-input>
        <el-button style="margin-left: 5px; background-color: #5defc1; color: white" @click="load" plain>查询</el-button> -->

        
        <!-- <el-select v-model="selectedOption" placeholder="请选择"> -->
      <!-- <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
    </el-select> -->
    
    <!-- <el-row class="card-row" style="margin: 0 -10px;">
      <el-col v-for="(card, index) in selectedCards" :key="index" :span="5">
        <el-card :header="card.title" style="margin: 10px;">
          <p>{{ card.description }}</p>
          <p>{{ card.description1 }}</p>
          
        </el-card>
      </el-col>
    </el-row> -->

      </div>

  

    </div>
</div>
  </template>
  


  <script>
  import request from "@/utils/request";

  import { ref } from 'vue'
  export default {
    setup(){
      let size = ref(40);
      return {size}
    },
    
    name: 'Home',
    components: {
  
    },
    data() {
      return {
        imgList: [
            {id:0,idView:require("../assets/ERP1.jpg")},
            {id:1,idView:require("../assets/ERP2.jpg")},
            {id:2,idView:require("../assets/ERP3.jpg")}, 
            {id:3,idView:require("../assets/ERP4.jpg")}, 
            {id:4,idView:require("../assets/ERP5.jpg")}, 
            {id:5,idView:require("../assets/ERP6.jpg")}, 
            ],
        selectedOption: '',
        options: [
          { value: 'option1', label: '2022-2023学年 第三学期' },
          { value: 'option2', label: '2023-2024学年 第一学期' },
          { value: 'option3', label: '2023-2024学年 第二学期' },
          // 添加更多的选项
        ],
        selectedCards: []
      }
    },
    watch: {
      selectedOption() {
        this.loadSelectedCards();
      }
    },
    created() {
      this.load();
    },
    methods:{
      load(){
        request.get("/api/sechandr",{
          params: {
            pageNum: this.currentPage4,
            pageSize: this.pageSize,
            search: this.search
          }
        }).then(res =>{
          console.log(res);
          this.tableData = res.data.records;
          this.total = res.data.total;
        })
      },
      loadSelectedCards() {
      // 根据选择器的值加载对应的卡片数据
      if (this.selectedOption === 'option1') {
        this.selectedCards = [
          { 
            title: '计算机技术项目训练', 
            description: '课程类别:实践课',
            description1: '课程性质:必修',
          },
          // 添加更多的卡片数据
        ];
      } else if (this.selectedOption === 'option2') {
        this.selectedCards = [
          { 
            title: 'Web架构技术', 
            description: '课程类别:专业课',
            description1: '课程性质:必修',
          },
          { 
            title: '高级网页设计', 
            description: '课程类别:专业课',
            description1: '课程性质:必修',
          },
          { 
            title: '操作系统', 
            description: '课程类别:专业课',
            description1: '课程性质:必修',
          },
          { 
            title: '算法分析与设计', 
            description: '课程类别:专业课',
            description1: '课程性质:必修',
          },
          // 添加更多的卡片数据
        ];
      } else if (this.selectedOption === 'option3') {
        this.selectedCards = [
          { 
            title: '互联网应用开发技术', 
            description: '课程类别:专业课',
            description1: '课程性质:必修',
          },
          { 
            title: '软件工程', 
            description: '课程类别:专业课',
            description1: '课程性质:必修',
          },
          { 
            title: '面向对象系统分析与设计', 
            description: '课程类别:专业课',
            description1: '课程性质:必修',
          },
          { 
            title: 'Linux系统编程', 
            description: '课程类别:专业课',
            description1: '课程性质:必修',
          },
          // 添加更多的卡片数据
        ];
      }
      // 可以根据更多选项添加更多条件
    }
    }

  }
 




  </script>

<style>
.c{
  
}
</style>